<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的能力</title>
  </head>
<style>
*{
  margin: 0;
  padding: 0;
}
.back{
  position: absolute;
  top:30px;
  left:15px;
  width: 25px;
  height: 25px;
  background: url("../../image/back.png");
  background-size: 100% 100%;
}
.header{
  background-color: #1296db;
  text-align: center;
  /*margin-top: 15px;*/
  padding-top: 25px;
  padding-bottom: 10px;
  /*height: 45px;*/

}
h3 {
    color: white;
    font-weight: lighter;
}
body{

  background-color: red;
}
.box{
  text-align: center;
  margin-top: 50px;
  color: red;
  font-size: 2em;
}
</style>
  <body style="background-color:#fff;">
    <div class="header">
      <a class="back" onclick="back()"></a>
      <h3>能力分析</h3>
    </div>
<div class="box">
  敬请期待
</div>
    <!-- <div class="back">
    返回
    </div>
    <br> -->
    <!-- <h1>能力不足啊</h1> -->
    <div class="main" id="main">

    </div>

  </body>
  <script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/main.js"></script>
  <script type="text/javascript">
  $(function(){
    back();
  })
  apiready=function(){

    // var main = echarts.init(document.getElementById('main'));
      // var main =$("#main")[0];
      function back(){
        api.historyBack({
            frameName: 'detail'
            }, function(ret, err) {
            if (!ret.status) {
               api.closeWin();
            }
            });
      }
    var pieChart = api.require('pieChart');
    pieChart.open({
        x: api.frameWidth / 2,
        y: api.frameHeight / 2,
        radius: 100,
        center: {
            title: '能力',
            subTitle: '综合分析'
        },
        // title:{
        //   text:'数据来源',
        //   x:'center'
        // },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },


        elements: [{
            value: 10,
            color: '#FF6600'

        }, {
            value: 20,
            color: '#660099'
        }, {
            value: 15,
            color: '#FF33FF'
        }, {
            value: 5,
            color: '#eeCCaa',
            // text:'dj'
        }, {
            value: 25,
            color: '#00CCFF'
        }],
        fixedOn: api.frameName,
        fixed: false
    }, function(ret, err) {
        if (ret) {
            // alert(JSON.stringify(ret));
        } else {
            // alert(JSON.stringify(err));
        }
    });
    // option = {
    //     title : {
    //         text: '数据来源',
    //         x:'center'
    //     },
    //     tooltip : {
    //         trigger: 'item',
    //         formatter: "{a} <br/>{b} : {c} ({d}%)"
    //     },
    //     legend: {
    //         orient: 'vertical',
    //         left: 'left',
    //         data: ['51job','智联招聘','前程无忧','广西人才网','拉勾网']
    //     },
    //     series : [
    //         {
    //             name: '访问来源',
    //             type: 'pie',
    //             radius : '55%',
    //             center: ['50%', '60%'],
    //             data:[
    //                 {value:335, name:'51job'},
    //                 {value:310, name:'智联招聘'},
    //                 {value:234, name:'前程无忧'},
    //                 {value:135, name:'广西人才网'},
    //                 {value:1548, name:'拉勾网'}
    //             ],
    //             itemStyle: {
    //                 emphasis: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                 }
    //             }
    //         }
    //     ]
    // };
    //
    //
    // // 使用刚指定的配置项和数据显示图表。
    // main.setOption(option);
    //



  }
  </script>
</html>
